<template>
  <div class="MeasuresDetail height100 width100">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/MeasuresList' }">预警措施</el-breadcrumb-item>
        <el-breadcrumb-item>预警措施反馈</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="NoticeDetail-center flexBetween">
      <TimeLine :activities="activities" />
      <div class="NoticeDetails-add">
        <div class="NoticeDetails-add-top flexBetween">
          <div>
            <el-row>
              <el-button size="small">预警信息</el-button>
              <el-button size="small">预警通知单</el-button>
              <el-button type="primary" size="small">预警措施</el-button>
              <el-button size="small" @click="toEWDaily">预警日报</el-button>
            </el-row>
          </div>
          <div>
            <el-row>
              <el-button size="small" @click="AddFh">返回</el-button>
            </el-row>
          </div>
        </div>
        <div class="NoticeDetails-add-forms flexBetween">
          <div class="LeftForms">
            <div class="NoticeDetails-add-title">
              国网湖北电力随州地区暴雨黄色预警通知 〔2021〕第 5 号
            </div>
            <el-descriptions class="margin-top" :column="2" border labelClassName="table_center" contentClassName="table_center">
              <el-descriptions-item>
                <template slot="label"> 签发人 </template>
                朱望林
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 时间 </template>
                2022年9月6日10:26:00
              </el-descriptions-item>
              <el-descriptions-item :span="2" contentClassName="table_left">
                <template slot="label"> 单位/部门 </template>
                国网随州市供电公司、本部办公室、安监部、设备部、配电部、建设部、营销部、数字化部、物资部、宣传部、后勤部、调控中心、特高压办
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 预警来源 </template>
                政府部门
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  <el-button type="text" size="small">
                    湖北省随州市暴雨黄色预警
                  </el-button>
                </template>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 险情类别 </template>
                暴雨
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 预警级别 </template>
                黄色
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 影响范围 </template>
                随州市全市
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label"> 影响时间 </template>
                2021-8-11至2021-8-12
              </el-descriptions-item>
              <el-descriptions-item :span="2" contentClassName="table_left">
                <template slot="label"> 事件概要 </template>
                据湖北省重大气象信息专报(〔2021〕第18期)预报，8月11日23时至8月12日24时，湖北随州市有大到暴雨，随县、广水市等局部地区有特大暴雨（150-250毫米），
                期间短时强降雨、雷电大风等强对流天气多发，最大小时降雨量40-90毫米，短时大风风力可达8-11级。
              </el-descriptions-item>
            </el-descriptions>
            <div class="titleStyle flexBetween padding10-0">
              <div class="borderLeftStyle">预警任务下发</div>
            </div>
            <div class="textarea_div">
              <textarea name="" id="" cols="30" rows="10" disabled>
                  负责清理应急物资库存情况，根据事态发展做好物资调配，配送准备工作。
              </textarea>
            </div>
            <div class="titleStyle flexBetween padding10-0">
              <div class="borderLeftStyle">预警措施反馈</div>
            </div>
            <div class="textarea_div">
              <textarea name="" id="" cols="30" rows="10" disabled>
                  物资部于2021年8月11日上午收到省公司下发的预警措施，计划2021年8月11日下午17点40分组织清点仓库应急物资信息，
                  准备及时收集应急物资需求信息，制定应急库存物资、协议储备物资、动态周转物资调拨方案，确保物资配送及时到位。
              </textarea>
            </div>
          </div>
          <div class="rightForms height100" v-if="stateType === 0">
            <div class="titleStyle flexBetween padding10-0" style="height: 5%">
              <div class="borderLeftStyle">预警措施执行</div>
              <div class="FullScreen" @click="showImage">
                <span class="icon iconfont icon-quanping"></span>全屏
              </div>
            </div>
            <div class="FullScreen_Img">
              <img src="@/assets/img/img11.jpg" alt="" height="100%" />
            </div>
          </div>
          <div class="rightForms height100" v-if="stateType !== 0">
            <div class="titleStyle flexBetween">
              <div class="borderLeftStyle">预警措施执行</div>
            </div>
            <div class="processDiv" v-for="(item,index) in datas" :key="index">
              <div class="fontWeight fontSize16 margin10-0">
                {{item.time}}
              </div>
              <div class="flexBetween imgAndText">
                <div class="imgAndText_image">
                  <img :src="item.image" alt="" height="186px" width="263px" />
                </div>
                <div class="imgAndText_text padding10-15" style="height: 166px">
                  {{item.content}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="web_bg" v-show="isShow">
      <div class="white margin5-10" style="float: right; cursor: pointer" @click="hideImage">
        关闭
      </div>
    </div>
  </div>
</template>

<script>
import TimeLine from "@/components/component/timeLine.vue";
export default {
  name: "MeasuresDetail",
  components: {
    TimeLine
  },
  data() {
    return {
      isShow: false,
      stateType: this.$route.params.indexs,
      activities: [
        {
          content: "预警信息新增",
          timestamp: "2022-09-1 18:00:00"
        },
        {
          content: "预警研判",
          timestamp: "2022-09-2 18:00:00"
        },
        {
          content: "预警通知单新增",
          timestamp: "2022-09-2 20:00:00"
          // color: "rgb(37, 109, 252)",
        },

        {
          content: "预警通知单审批",
          timestamp: "2022-09-5 18:00:00"
        },
        {
          content: "预警通知单发布",
          timestamp: "2022-09-5 20:00:00"
        },
        {
          content: "措施反馈",
          timestamp: "2022-09-5 21:00:00"
        },
        {
          content: "措施落实",
          timestamp: "2022-09-5 22:00:00"
        }
      ],
      datas: [
        {
          time: "2022-9-6 15:50:44",
          image: require("@/assets/img/person1.jpg"),
          content: "8月11日，随县供电公司营销部收到下发的预警措施，并于11日下午安排工作人员密切跟踪获取重要客户和居民用户供电、停电信息"
        },
        {
          time: "2022-9-6 15:50:44",
          image: require("@/assets/img/person2.jpg"),
          content: "8月11日，广水市营销部收到下发的预警措施，并于11日下午安排值班工作人员密切跟踪统计用电负荷和电量的损失、恢复信息"
        },
        {
          time: "2022-9-6 15:50:44",
          image: require("@/assets/img/person3.jpg"),
          content: "8月11日，随州市供电公司营销部收到下发的预警措施，并于11日下午开始安排工作人员通知重要用户做好电力设施防水措施，督促住宅小区做好地下配电室防朿封折排为准备"
        }
      ]
    };
  },
  methods: {
    toEWDaily() {
      this.$router.push({ name: "EWDaily" });
    },
    AddFh() {
      this.$router.go(-1);
    },
    showImage() {
      this.isShow = true;
    },
    hideImage() {
      this.isShow = false;
    }
  }
};
</script>

<style scoped lang="less">
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}
:deep(.el-breadcrumb) {
  font-size: 16px;
  line-height: initial;
}
.NoticeDetail-center {
  width: 100%;
  height: 100%;
  margin-top: 10px;
  .NoticeDetails-add {
    width: 83%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    .NoticeDetails-add-top {
      margin: 10px 20px;
      padding-bottom: 20px;
      border-bottom: solid 2px #f4f4f4;
      display: flex;
    }
    .NoticeDetails-add-forms {
      width: 100%;
      height: 88%;
      overflow-y: auto;
      position: relative;
      .NoticeDetails-add-title {
        text-align: center;
        line-height: 35px;
        font-size: 24px;
        color: #666666;
        background-color: #f4f4f4;
      }
      .borderLeftStyle {
        color: #333;
        font-size: 18px;
      }
      .LeftForms {
        width: 60%;
        padding: 0 20px;
        .textarea_div {
          textarea {
            resize: none;
            color: #000000;
            height: 126px;
            width: 98%;
            padding: 5px 1%;
            font-size: 18px;
          }
        }
      }
      .rightForms {
        width: 40%;
        .FullScreen {
          cursor: pointer;
          span {
            font-size: 20px;
          }
          color: #999999;
          padding: 0 10px;
          font-size: 18px;
        }
        .FullScreen_Img {
          img {
            width: 90%;
            display: block;
            margin: auto;
          }
        }
        .processDiv {
          .imgAndText {
            .imgAndText_image {
              background-repeat: no-repeat;
            }
            .imgAndText_text {
              background-color: #f8f9f8;
              color: #000;
            }
          }
        }
      }
    }
  }
}
:deep(.el-descriptions__table) {
  .el-descriptions-item__label.is-bordered-label {
    width: 12%;
    color: #333;
  }
  .table_center {
    text-align: center;
    color: #333;
  }
  .table_left {
    text-align: left;
    color: #333;
  }
}
:deep(.el-descriptions .is-bordered .el-descriptions-item__cell) {
  padding: 2px 5px;
}
#web_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  zoom: 1;
  background-image: url(../../../assets/img/img11.jpg);
  background-color: rgba(0, 0, 0, 0.9);
  background-repeat: no-repeat;
  background-position: center center;
}
</style>
